<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <title>%VITE_APP_TITLE%</title>
    <style>
      body {
        margin: 0;
      }
      /* 内联样式来确保加载效果在应用初始化之前生效 */
      #loading {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        z-index: 9999;
      }
      /* 暗色系样式 */
      .dark #loading {
        background: #121212; /* 深色背景 */
      }
      .loader {
        width: 50px;
        --b: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        padding: 1px;
        background: conic-gradient(#0000 10%, #666) content-box;
        mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
          radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
        animation: l4 1s infinite steps(10);
      }
      @keyframes l4 {
        to {
          transform: rotate(1turn);
        }
      }
    </style>
    <script>
      ;(function () {
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
        const setting = localStorage.getItem('app-dark-scheme') || 'auto'
        if (setting === 'dark' || (prefersDark && setting !== 'light'))
          document.documentElement.classList.toggle('dark', true)
      })()
    </script>
  </head>
  <body>
    <div id="loading">
      <div class="loader"></div>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <noscript>
      This website requires JavaScript to function properly. Please enable JavaScript to continue.
      <br />
      本网站需要 JavaScript 以正常运行，请启用 JavaScript 以继续。
    </noscript>
  </body>
</html>
